【HTML】selectタグ - セレクトボックス（選択式入力項目）

HTMLのselectタグについて解説します。

検証環境

HTML

macOS

14.1

selectタグ

selectタグは“セレクトボックスの入力項目”を意味するタグです。

選択肢を意味するoptionタグを合わせて使用します。

基本構文

<select name="データ名">
    <option value="値">選択肢１</option>
    <option value="値">選択肢２</option>
    <option value="値">選択肢３</option>
</select>

optionタグ

optionタグは“select要素の選択肢”を意味するタグです。

フォーム送信では選択されたoption要素の値が送信されます。

属性

主な属性は次の通りです。

属性名	必須	内容
multiple	-	複数選択

サンプルコード

セレクトボックス

sample.html

___ih_hl_start
<select name="fruit">
    <option value="apple">リンゴ</option>
    <option value="pineapple">パイナップル</option>
    <option value="grape">ブドウ</option>
</select>
___ih_hl_end

プレビュー

複数選択

PCではCtlキーを押しながら、選択することで複数選択が可能です。

sample.html

___ih_hl_start
<select name="fruit" multiple>
    <option value="apple">リンゴ</option>
    <option value="pineapple">パイナップル</option>
    <option value="grape">ブドウ</option>
</select>
___ih_hl_end

プレビュー